<template>
  <div class="mocks-detail-main">
    <div class="result-head" v-if="paperInfo">
      <ul class="layui-clear">
        <li v-for="(part, index) in paperInfo.part_list"
            :key="index"
            :class="(currentPart == index) ? 'active': ''" @click.prevent="showPart(index)">
          <strong class="r-num">Part {{index + 1}}</strong>
          <span class="r-side"></span>
        </li>
      </ul>
    </div>
    <!--口语录音部分-->
    <transition name="fade">
      <mocks-speak-detail v-if="partInfo && partInfo.part_type == 2" :part-info="partInfo"></mocks-speak-detail>
    </transition>
    <!--听力部分-->
    <transition name="fade">
      <mocks-listen-detail v-if="partInfo && partInfo.part_type == 1" :part-info="partInfo"></mocks-listen-detail>
    </transition>
    <!--组合题部分-->
    <transition name="fade">
      <mocks-combination-detail v-if="partInfo && partInfo.part_type == 3" :part-info="partInfo"></mocks-combination-detail>
    </transition>
    <!--写作题部分-->
    <transition name="fade">
      <mocks-write-detail v-if="partInfo && partInfo.part_type == 5" :part-info="partInfo"></mocks-write-detail>
    </transition>
    <!--阅读题部分-->
    <transition name="fade">
      <mocks-read-detail v-if="partInfo && partInfo.part_type == 4" :part-info="partInfo"></mocks-read-detail>
    </transition>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import MocksListenDetail from './listen_detail';
  import MocksCombinationDetail from './combination_detail';
  import MocksWriteDetail from './write_detail';
  import MocksReadDetail from './read_detail';
  import MocksSpeakDetail from './speak_detail';

  export default {
    name: "MocksDetails",
    components: { MocksListenDetail, MocksCombinationDetail, MocksWriteDetail, MocksReadDetail, MocksSpeakDetail},
    data () {
      return {
        currentPart: 0,
        paperInfo: null
      }
    },
    created () {
      let flag = true;
      if (!this.paperId) {
        let paperId = this.$route.params.paperId;
        if (!paperId) {
          flag = false;
        } else {
          this.updatePaperId(paperId);
        }
      }
      if (flag) {
        this._getPaperResult();
      }
    },
    beforeRouteLeave (to, from, next) {
      if (to.name == 'result') {
        next();
      } else {
        window.location.replace('#' + from.path);
      }
    },
    computed: {
      ...mapState([
        'paperId'
      ]),
      partInfo () {
        if (this.paperInfo && this.paperInfo.part_list && this.paperInfo.part_list.length) {
          return this.paperInfo.part_list[this.currentPart];
        }
        return null;
      }
    },
    methods: {
      ...mapActions([
        'updatePaperId'
      ]),
      _getPaperResult () {
        let _this = this;
        $.ajax({
          url: 'http://www.ruixinnj.com/test/get_paper',
          // url: '/api/mocks/paper',
          type: 'post',
          dataType: 'json',
          data: {
            id: _this.paperId,
            completed: 1,
            random_string: (typeof random_string == 'string' ? random_string : ''),
            secret_string: (typeof secret_string == 'string' ? secret_string : '')
          },
          success: function (response) {
            if (response.status == 1) {
              _this.paperInfo = response.data;
            } else {
              layer.msg(response.msg);
            }
          }
        })
      },
      showPart (index) {
        this.currentPart = index;
      }
    }
  }
</script>
